<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的JS动画和velocity.js</title>
    <script src="../vue.js"></script>
    <script src="../velocity.js"></script>
</head>
<body>
    <div id="root">
        <transition
                name="fade"
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"
        >
            <div v-if="show">
                hello world
            </div>
        </transition>
        <button @click="handleClick"> 切换 </button>


    </div>

    <script>
        var vm = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                handleClick:function () {
                    this.show = !this.show
                },

                handleBeforeEnter:function (el) {
                    el.style.opacity = 0;
                    // el.style.color='red'
                },

                handleEnter:function (el,done) {
                    Velocity(el,{opacity:1},
                        {
                            duration:1000,
                            complete:done
                        })
                    // setTimeout(()=>{
                    //     el.style.color = 'orange'
                    // },2000);
                    //
                    // setTimeout(()=>{
                    //     done()
                    // },4000)
                },

                handleAfterEnter:function (el) {
                    alert("动画结束")
                    // el.style.color='black'
                }
            }
        })
    </script>

</body>
</html>